<template>
    <div id="app">

        <el-container>
            <el-header height="34px" style="padding: 0">
                <div style="background-color: #f9f9f9; width: 1200px;margin: 0 auto; position: relative;line-height: 0px; ">

                </div>
            </el-header>

            <div class="logo_line">
                <div class="step_bar">
                    <div class="shopping_procedure">
                        <ul class="Steps">
                            <li class="active">我的购物车</li>
                            <li class="">填写订单</li>
                            <li class="">完成订单</li>
                        </ul>
                    </div>
                    <div class="logo">
                        <a href="http://localhost:8500/about">
                            <img src="img.png" alt=""
                                 class="shoppingCar_img">
                        </a>
                    </div>
                </div>
            </div>


            <div class="add_line">
                <div class="address_bar">
                    <div class="address">
                        <span>配送地址:</span>
                        <div class="select_add">
                            <el-cascader
                                    size="large"
                                    :options="options"
                                    v-model="selectedOptions"
                                    @change="handleChange">
                            </el-cascader>
                        </div>
                    </div>
                </div>
            </div>


            <div>
                <el-table class="buyCar_bar"
                          :data="productArr"
                          @selection-change="handleSelectionChange"
                          ref="multipleTable"
                          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
                >
                    <el-table-column type="selection" label="选择" width="53" v-model="checkgroup">
                        <!--            <template>
                                    <el-checkbox></el-checkbox>
                                    </template>-->
                    </el-table-column>
                    <el-table-column prop="url" label="" width="102">
                        <template slot-scope="scope">
                            <el-popover
                                    placement="right-end"
                                    width="200"
                                    trigger="hover"
                            >
                                <img :src="scope.row.url" style="width: 100%" alt="">
                                <img :src="scope.row.url" style="width: 100%" alt="" slot="reference">
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="商品信息" width="326"></el-table-column>
                    <el-table-column prop="money" label="单价(元)" width="110"></el-table-column>
                    <el-table-column prop="snum" label="数量" width="160" align="center">

                        <template slot-scope="scope">
                            <el-input-number size="mini" v-model="scope.row.snum" @change="handleChangeNum(scope.row)"
                                             :min="1"
                                             :max="10"
                                             label="描述文字"></el-input-number>
                        </template>

                    </el-table-column>
                    <el-table-column prop="sumPrice" label="金额(元)" width="130" align="center">
                        <template slot-scope="scope">
                            <span style="color: orangered" prop="totalMoney">¥{{(scope.row.money*scope.row.snum).toFixed(2)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="60">
                        <template slot-scope="scope">
                            <el-button type="danger" icon="el-icon-delete" circle size="mini"
                                       @click="openDeleteConfirm(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div style="position: static;
                            bottom: -20px;
                            z-index: 101;
                            width: 100%;
                            left: 0px;">
                    <div class="total">
                        <div class="totalRight">
                            <el-button type="primary" plain @click="settleAccount" class="gg">结&nbsp;&nbsp;算</el-button>
                            <div class="subTotal">
                                <div>
                                    <div class="cartSum">总计(不含运费)：</div>
                                    <span class="allMoney">￥{{allMoney.toFixed(2)}}</span>

                                </div>
                                <p></p>
                            </div>
                        </div>
                    </div>
                </div>

                <!--<table>
                    <tr>
                        <th>选择</th>
                        <th>商品信息</th>
                        <th>单价(元)</th>
                        <th>数量</th>
                        <th>金额(元)</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="p in productArr">
                        <td><el-checkbox ></el-checkbox></td>
                        <td><img :src="p.shoppingImg" alt="">{{p.shoppingText}}</td>
                        <td>{{p.price}}</td>
                        <td><el-input-number size="mini" v-model="p.num"></el-input-number></td>
                        <td>{{p.sumPrice}}</td>
                        <td></td>
                    </tr>
                </table>-->
            </div>
            <div style="margin: 0 auto">
                <!--<div style="background-color: red ;width: 1000px ;height: 30px;position: relative"></div>-->
                <div style="margin-top: 50px">
                    <template>
                        <div>
                            <div class="swiper-container" :options="swiperOption" @change="swiperChange"
                                 style="border: 1px solid #dcdcdc">
                                <span style="font-size: 16px;font-weight: bold;margin-left: 10px;margin-top: 10px;">根据购物车中的商品为您推荐</span>
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x5.ddimg.cn/7/8/25300645-1_b_6.jpg" alt="">魔兽世界编年史第三卷</a>
                                    </div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x5.ddimg.cn/61/26/27949345-1_b_2.jpg" alt="">司命</a></div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x8.ddimg.cn/7/10/28499038-1_b_11.jpg" alt="">吞噬星空典藏版1 我吃西红柿</a>
                                    </div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x1.ddimg.cn/77/28/29212601-1_b_2.jpg" alt="">吞噬星空典藏版7</a>
                                    </div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x5.ddimg.cn/34/23/29139595-1_b_15.jpg" alt="">龙族</a></div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x6.ddimg.cn/30/23/29137116-1_b_3.jpg" alt="">吞噬星空典藏版5</a>
                                    </div>
                                    <div class="swiper-slide"><a href="http://www.jd.com"><img
                                            src="http://img3x1.ddimg.cn/91/11/29426851-1_b_2.jpg" alt="">哑舍新版套装（全套1-6册）</a>
                                    </div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x8.ddimg.cn/26/2/25230968-1_b_5.jpg" alt="">星辰变 典藏版1
                                        我吃西红柿</a></div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x9.ddimg.cn/36/34/28530549-1_b_10.jpg" alt="">吞噬星空典藏版2</a>
                                    </div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x2.ddimg.cn/93/1/29463582-1_b_5.jpg" alt="">墨菲定律</a></div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x2.ddimg.cn/33/26/28518072-1_b_3.jpg" alt="">张正荣之书</a></div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x2.ddimg.cn/33/26/28518072-1_b_3.jpg" alt="">张正荣之书</a></div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x2.ddimg.cn/33/26/28518072-1_b_3.jpg" alt="">张正荣之书</a></div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x2.ddimg.cn/33/26/28518072-1_b_3.jpg" alt="">张正荣之书</a></div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x2.ddimg.cn/33/26/28518072-1_b_3.jpg" alt="">张正荣之书</a></div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x2.ddimg.cn/33/26/28518072-1_b_3.jpg" alt="">张正荣之书</a></div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x2.ddimg.cn/33/26/28518072-1_b_3.jpg" alt="">张正荣之书</a></div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x2.ddimg.cn/33/26/28518072-1_b_3.jpg" alt="">张正荣之书</a></div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x2.ddimg.cn/33/26/28518072-1_b_3.jpg" alt="">张正荣之书</a></div>
                                    <div class="swiper-slide"><a href="http://www.baidu.com"><img
                                            src="http://img3x2.ddimg.cn/33/26/28518072-1_b_3.jpg" alt="">张正荣之书</a></div>


                                </div>
                                <!-- 分页器 -->
                                <div class="swiper-pagination"></div>

                                <!-- 导航按钮 -->
                                <div class="swiper-button-prev"></div>
                                <div class="swiper-button-next"></div>

                                <!-- 滚动条 -->
                                <!--<div class="swiper-scrollbar"></div>-->
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </el-container>

        <div class="footer">
            <div class="footer_box">
                <div class="footer_copyright">
                    <span>Copyright (C) 书笺小驿 2022.10.1-2022.12.1, All Rights Reserved</span>
                </div>
            </div>
        </div>


    </div>
</template>

<script>

    import Swiper from 'swiper'
    import {regionData, CodeToText} from 'element-china-area-data'

    export default {
        data() {
            return {
                value: [],
                user:{},
                form: {},
                options: regionData,
                selectedOptions: [],
                productArr: [{uid:''}],
                selection: [],
                list: [],
                visible: true,
                swiperOption: [{}],
                checkgroup: [],
                multipleTable: [],
                allMoney: 0,
                OrdersAddNew: {
                    uId: '',
                    allMoney: '',
                },
                OrderoneAddNew: [
                    {
                        Id: '',
                        gId: '',
                        snum: '',
                    }
                ],
                uId: '',
                oId: 0,

            }
        },

        methods: {
            openDeleteConfirm(val) {
                let message = '此操作将删除购物车里【' + val.name + '】商品，是否继续？';
                this.$confirm(message, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.handleDelete(val);
                }).catch(() => {
                });
            },

            handleDelete(val) {
                let url = 'http://localhost:8080/shoppingCar/' + val.id + '/delete';
                console.log('url = ' + url);
                this.axios
                    .post(url).then((response) => {
                    let responseBody = response.data;
                    if (responseBody.state != 20000) {
                        this.$message.error(responseBody.message);
                    }
                    if (responseBody.state == 20000 || responseBody.state == 40400) {
                        this.commentCount();
                    }
                });
            },

            handleSelectionChange(val) {
                this.allMoney = 0;
                this.selection = val;
                this.multipleTable = val;
                if (val && val.length) {
                    val.forEach(item => {
                        this.allMoney += item.snum * item.money;
                    })
                }
                console.log(val);
            },
            swiperChange() {

            },
            handleChangeNum(value) {
                this.allMoney = 0;
                console.log(value)
                this.multipleTable.forEach(item => {
                    item.snum = value.snum
                    this.allMoney += item.money * item.snum;
                })
            },
            handleChange(arr) {
                var _this = this;
                //console.log(arr);
                //console.log(CodeToText[arr[0]], CodeToText[arr[1]], CodeToText[arr[2]]);
                let ccc = console.log(CodeToText[arr[0]], CodeToText[arr[1]], CodeToText[arr[2]]);
                /* _this.form.provinceCode = arr[0];
                 _this.form.cityCode = arr[1];
                 _this.form.areaCode = arr[2];*/
                console.log(ccc)
            },
            loadShoppingCarList() {
                /*let url = 'http://localhost:8080/shoppingCar/shoppinglist/' + this.user.uid;
                this.axios.get(url).then((response) => {
                    let responseBody = response.data;
                    this.productArr = responseBody.data;
                })*/
                console.log("555-----------"+this.user.id);
            },

            settleAccount() {
                if (!this.multipleTable || !this.multipleTable.length) {
                    this.$message.error("请选择要结算的商品!")
                    return
                }
                this.OrdersAddNew.allMoney = this.allMoney;
                this.OrdersAddNew.uId = this.user.id;
                console.log(this.OrdersAddNew.uId);
                let OrdersAddNew = this.qs.stringify(this.OrdersAddNew);
                let url = 'http://localhost:8080/order/insert';
                this.axios.post(url, OrdersAddNew).then(res => {
                    let responseBody = res.data;
                    this.oId = responseBody.data;
                    console.log("-------------------------------", this.oId)
                    console.log("插入成功")
                    let data = {allMoney: this.allMoney, uId: this.uId, carts: []}
                    this.multipleTable.forEach(v => {
                        data.carts.push({gId: v.gid, snum: v.snum, oId: this.oId})
                    })
                    console.log("111111111111111", data)
                    this.OrderoneAddNew = data.carts;
                    console.log("-----------", this.OrderoneAddNew)
                    let url1 = 'http://localhost:8080/order/insertOrderone';
                    this.axios.post(url1, this.OrderoneAddNew).then(res => {
                        console.log("插入成功")
                        location.href="/Order";
                    })
                })
            },
            commentCount() {
                let url = "http://localhost:8080/shoppingCar/getUserLogin";
                this.axios.get(url).then((response) => {
                    if (response.data.data == null) {
                        location.href = "/userlogin";
                        return;
                    }
                    let responseBody = response.data;
                    this.user = responseBody.data;
                    let uid = this.user.id;
                    console.log("用户信息" + this.user.id);
                    let url = 'http://localhost:8080/shoppingCar/shoppinglist/' + this.user.id;
                    this.axios.get(url).then((response) => {
                        let responseBody = response.data;
                        this.productArr = responseBody.data;
                    })
                })
            },
        },
        mounted() {
            this.commentCount();
            {
                new Swiper('.swiper-container', {
                    //direction: 'vertical', // 垂直切换选项
                    //loop: true, // 循环模式选项
                    // 分页器
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },

                    // 前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },

                    // 滚动条
                    scrollbar: {
                        el: '.swiper-scrollbar',
                    },
                    slidesPerView: 5,      //行
                    slidesPerColumn: 2,    //列
                    slidesPerGroup: 5,
                    spaceBetween: 10,       //间隙
                    slidesPerColumnFill: 'column', //顺序
                    autoplay: true,         //自动切换下一页 循环
                    pauseOnMouseEnter: true//鼠标悬停暂停
                })
            }

            console.log('mounted');
            this.loadShoppingCarList();
        },

        created() {
            // 初始化省市区
            this.selectedOptions = [this.form.provinceCode, this.form.cityCode, this.form.areaCode];
        },

    }

    /*
    * swiper js 代码
    */

</script>

<style scoped>
    @import '../style/shoppingCar.css';
</style>